<template>
  <el-dialog
    :visible.sync="visible"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    append-to-body
    width="800px"
    top="30px"
    title="评级申请"
  >
    <div v-loading="loading">
      <div class="item-title text-primary py-2">评级有效期</div>
      <div class="d-flex align-items-center px-3">
        <div class="item-label font-weight-bold">评级期限</div>
        <div class="d-flex ml-3">{{ formData.year }}年{{ enumQuarter[formData.quarter] }}</div>
      </div>
      <div class="item-title text-primary py-3">评级指标情况录入</div>
      <div class="px-3">
        <div v-for="(p, index) of quotas" :key="index">
          <div class="font-weight-bold">{{ p.label }}</div>
          <template v-if="p.data">
            <div class="d-flex py-1 align-items-center" v-for="(m, mindex) of p.data" :key="mindex">
              <div class="item-label ml-3">{{ m.second_quota_name }}：</div>
              <div class="flex-1">{{ m.third_quota_name }}</div>
            </div>
          </template>
        </div>
      </div>
      <div class="item-title text-primary py-3">评级资料清单</div>
      <ul class="list-unstyled attach-type-list">
        <li class="attach-type-item">
          <div class="attach-tag-label">
            <!-- <span class="text-danger mx-1" v-if="item.required">*</span> -->
            <span class="font-weight-bold">{{ '营业执照' }}</span>
          </div>
          <ul class="list-unstyled">
            <li
              v-for="(file, index) in registerNoAttachment"
              :key="`aready-${index}`"
              class="attach-item"
            >
              <attach-item :attach-data="file"></attach-item>
            </li>
          </ul>
        </li>
      </ul>
      <div class="item-title text-primary py-3">其他备注说明</div>
      <div class="d-flex align-items-center mx-3">
        <div class="item-label font-weight-bold"></div>
        <div class="d-flex ml-3 flex-1">
          {{ formData.remark }}
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { enumQuarter } from '@/credit/views/city/grade/NewGrade'
import { attachAdapter } from '@/bank/components/attach/index'
import { arrayFromString } from '@vimi/utils-tool'
import AttachItem from '@/bank/components/attach/Item'
export default {
  components: {
    AttachItem,
  },
  props: {
    queryId: String,
    visible: Boolean,
  },
  data() {
    return {
      enumQuarter,
      loading: false,
      formData: {},
      quotas: [],
      tableName: 'agency_rating',
    }
  },
  computed: {
    registerNoAttachment() {
      return this.initForm('register_no_attachment')
    },
  },
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    initForm(key) {
      const item = arrayFromString(this.formData[key])
      return item.reduce((prev, curr) => {
        prev.push({
          url: curr,
          ...attachAdapter({ attachment: curr }),
        })
        return prev
      }, [])
    },
    getData() {
      this.formData = {}
      this.quotas = []
      if (!this.queryId) {
        return
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, {
          'agency_rating_id.eq': this.queryId,
          subKey: 'agency_rating_quota.agency_rating_id',
        })
        .then(res => {
          const data = res?.data?.[0] || {}
          const quotas = (data.agency_rating_quota ?? []).sort((a, b) => {
            return a.order_num > b.order_num ? 1 : -1
          })
          const objectData = {}
          quotas.forEach(item => {
            if (objectData[item.first_quota_name]) {
              objectData[item.first_quota_name].push(item)
            } else {
              objectData[item.first_quota_name] = [{ ...item }]
            }
          })
          this.quotas = Object.keys(objectData).map(key => {
            return {
              label: key,
              data: objectData[key],
            }
          })
          this.formData = data
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped>
.item-title {
  font-size: 1.1rem;
}
.item-label {
  width: 130px;
}
.attach-label {
  width: 230px;
}
.attach-type-list > .attach-type-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.attach-type-item {
  display: flex;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dotted $gray-200;
}

.attach-tag-label {
  width: 130px;
  width: var(--tag-balel-width, 180px);
  padding-top: 0.25rem;
  padding-left: 0.5rem;
}
.attach-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.list-unstyled .attach-item:last-child {
  border-bottom: none;
}
</style>
